import React from 'react'
import '../../assets/css/cart/order.less'
import {Toast} from "antd-mobile";
export default class OrderComponents extends React.Component{
    constructor(){
        super()
        this.state={
            order:[],
            site:{}
        }
    }
    getSite(){
        fetch(
            'http://vueshop.glbuys.com/api/user/address/defaultAddress?uid='+localStorage['uid']+'&token=1ec949a15fb709370f',
            {
                method: 'get'
            }
        )
            .then((res) => res.json())
            .then((res) => {
                console.log(res)
                if (res.code === 200) {
                    console.log(res)
                   this.setState({
                       site:res.data
                   })
                }
            })
    }
    componentWillMount() {
        this.getSite()
        this.setState({
            order:JSON.parse(localStorage['accountGoods'])
        },()=>{
            console.log(this.state.order);
        })
    }
    setOrder(){
        var goodsData = []
        var order = this.state.order.cart
        console.log(order);
        for (var i = 0; i <order.length ; i++) {
            var obj = {
                gid:order[i].data.gid,
                title:order[i].data.title,
                amount:order[i].count,
                price:order[i].price,
                img:order[i].data.images[0],
                checked:order[i].check,
                freight:order[i].data.freight,
                attrs:[
                    {
                        attrid:'1006',
                        title:order[i].color.title,
                        param:[
                            {
                                paramid:'1013',
                                title:order[i].color.value
                            }
                        ]
                    },
                    {
                        attrid: "1007",
                        title: order[i].size.title,
                        param: [
                            {
                                paramid: "1016",
                                title: order[i].size.value
                            }
                        ]
                    }
                ]
            }
            goodsData.push(obj)
        }
        console.log(goodsData);
        const parmas = new URLSearchParams()
        parmas.append('uid',localStorage['uid'])
        parmas.append('freight',this.state.order.allFreight)
        parmas.append('addsid',this.state.site.aid)
        parmas.append('goodsData',JSON.stringify(goodsData))
        fetch('http://vueshop.glbuys.com/api/order/add?token=1ec949a15fb709370f',{
            method:'POST',
            body:parmas
        }).then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                if(res.code===200){
                }
            })
    }
    submit(){
        var cart = JSON.parse(localStorage['cart'])
        for (var i = 0; i < cart.length; i++) {
            if(cart[i].check){
                cart.splice(i,1)
                i = i-1
            }
        }
        localStorage.setItem('cart', JSON.stringify(cart))
        this.setOrder()
        this.props.history.push('/cart/order/succeed')
    }
    goBack(){
        this.props.history.goBack()
    }
    render() {
        return(
            <div id='order'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>确认订单</div>
                    <div></div>
                </div>
                <div className='site'>
                    {this.state.site?
                        <div>
                            <div>收货人:{this.state.site.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {this.state.site.cellphone}
                            </div>
                            <div>
                                <img src="/images/home/cart/map.png" alt=""/>
                                {this.state.site.province}{this.state.site.city}{this.state.site.area}{this.state.site.address}
                            </div>
                        </div>:''
                    }
                    <div className='img'><img src="/images/user/my/右箭头.png" alt=""/></div>
                </div>
                <div className='accountGoods'>
                    {this.state.order.cart.map((item,index)=>{
                        return(
                            <div className='good' key={index}>
                                <div className='img'>
                                    <img src={item.data.images[0]} alt=""/>
                                </div>
                                <div className='good-info'>
                                    <div>{item.data.title}</div>
                                    <div>
                                        <div>{item.color.title}: {item.color.value} </div>
                                        <div>{item.size.title}: {item.size.value} </div>
                                    </div>
                                    <div>x{item.count}</div>
                                    <div>￥{item.data.price}</div>
                                </div>
                            </div>
                        )
                    })}
                    <div className='price'>
                        <div>商品总额</div>
                        <div>￥{this.state.order.allPrice}</div>
                    </div>
                    <div className='freight'>
                        <div>运费</div>
                        <div>￥{this.state.order.allFreight}</div>
                    </div>
                </div>
                <div className='footer'>
                    <div>实际金额: <span>￥{this.state.order.allPrice+this.state.order.allFreight}</span>     </div>
                    <div onClick={this.submit.bind(this)}>提交订单</div>
                </div>
            </div>
        )
    }
}